<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Mr Hotels - 酒店首页</title>
    <link th:href="@{/css/web_page/bootstrap.css}" rel="stylesheet" type="text/css" media="all">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script th:src="@{/js/web_page/jquery-1.11.0.min.js}"></script>
    <!-- Custom Theme files -->
    <link th:href="@{/css/web_page/style.css}" rel="stylesheet" type="text/css" media="all"/>
    <link th:href="@{/css/web_page/style1.css}" rel="stylesheet" type="text/css" media="all"/>
    <!-- Custom Theme files -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content=""/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!--Google Fonts-->
    <link href='http://fonts.googleapis.com/css?family=Hind:400,300' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Aladin' rel='stylesheet' type='text/css'>
    <!--google fonts-->
    <!-- animated-css -->
    <link th:href="@{/css/web_page/animate.css}" rel="stylesheet" type="text/css" media="all">
    <script th:src="@{/js/web_page/wow.min.js}"></script>
    <script>
        new WOW().init();
    </script>
    <!-- animated-css -->
    <script th:src="@{/js/web_page/modernizr.js}"></script>
    <script>
        $(document).ready(function () {
            if (Modernizr.touch) {
                // show the close overlay button
                $(".close-overlay").removeClass("hidden");
                // handle the adding of hover class when clicked
                $(".branch-gd").click(function (e) {
                    if (!$(this).hasClass("hover")) {
                        $(this).addClass("hover");
                    }
                });
                // handle the closing of the overlay
                $(".close-overlay").click(function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    if ($(this).closest(".branch-gd").hasClass("hover")) {
                        $(this).closest(".branch-gd").removeClass("hover");
                    }
                });
            } else {
                // handle the mouseenter functionality
                $(".branch-gd").mouseenter(function () {
                    $(this).addClass("hover");
                })
                // handle the mouseleave functionality
                    .mouseleave(function () {
                        $(this).removeClass("hover");
                    });
            }
        });
    </script>
    <script th:src="@{/js/web_page/bootstrap.min.js}"></script>
    <script th:src="@{/lib/layui/layui.js}"></script>


</head>
<body>
<!--header start here-->
<div th:replace="web_page/public_page.html::#header"></div>
<!--header end here-->
<!--banner  start hwew-->
<div class="banner">
    <div class="container">
        <div class="banner-main wow zoomIn" data-wow-delay="0.3s">
            <h2>MR HOTELS</h2>
            <h6>欢迎来到酒店先生！</h6>
            <p>只需五分钟即可成功订房，享受星级待遇，马上试试吧！</p>
        </div>
    </div>
</div>
<!--BANNER END HERE-->
<!--information start here-->
<div class="information">
    <div class="container">
        <div class="information-main">
            <div class="information-grid five-star wow slideInLeft" data-wow-delay="0.3s">
                <div class="col-md-4 hotel-info">
                    <div class="info-left">
                        <img th:src="@{/images/s1.png}" alt="">
                    </div>
                    <div class="info-right">
                        <h4>Star Hotel</h4>
                        <p>让您享受星级酒店待遇！</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="col-md-4 hotel-info">
                    <div class="info-left">
                        <img th:src="@{/images/s2.png}" alt="">
                    </div>
                    <div class="info-right">
                        <h4>services</h4>
                        <p>热情的服务保您满意！</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="col-md-4 hotel-info">
                    <div class="info-left">
                        <img th:src="@{/images/s4.png}" alt="">
                    </div>
                    <div class="info-right">
                        <h4>Secure</h4>
                        <p>对客户隐私的绝对保密！</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="information-grid wow slideInRight" data-wow-delay="0.3s">
                <div class="col-md-4 hotel-info">
                    <div class="info-left">
                        <img th:src="@{/images/s3.png}" alt="">
                    </div>
                    <div class="info-right">
                        <h4>Food</h4>
                        <p>提供健康且可口的食物！</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="col-md-4 hotel-info">
                    <div class="info-left">
                        <img th:src="@{/images/s5.png}" alt="">
                    </div>
                    <div class="info-right">
                        <h4>Scenery</h4>
                        <p>靠近海岸线的美丽风景！</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="col-md-4 hotel-info">
                    <div class="info-left">
                        <img th:src="@{/images/s6.png}" alt="">
                    </div>
                    <div class="info-right">
                        <h4>Bell</h4>
                        <p>准时贴心的房间订餐服务！</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<div class="leaves">
    <div class="container">
        <div class="leaves-main wow zoomIn" data-wow-delay="0.3s">
            <h1>让您不会想离开这里！</h1>
            <h6>100% 的友好服务</h6>
            <p>
                只要您尝试一次，一定会爱上这里！
            </p>
        </div>
    </div>
</div>
<!--leaves end here-->
<!--branches start here-->
<div class="branches">
    <div class="branches-main wow zoomIn" data-wow-delay="0.3s">
        <div class="branches-top">
            <h3>酒店实景图</h3>
        </div>
        <div id="effect-5" class="branch-btm">
            <div class="col-md-3 branch-gd-main">
                <div class="branch-gd  no-mar"><a href="room.html">
                    <img th:src="@{/images/b6.jpg}" alt="" class="img-responsive">
                    <div class="overlay">
                        <span class="expand lardge">+</span>
                        <span class="close-overlay hidden">x</span>
                    </div>
                </a>
                </div>
            </div>
            <div class="col-md-3 branch-gd-main">
                <div class="branch-gd went-branc"><a href="room.html">
                    <img th:src="@{/images/b1.jpg}" alt="" class="img-responsive">
                    <div class="overlay">
                        <span class="expand">+</span>
                        <span class="close-overlay hidden">x</span>
                    </div>
                </a>
                </div>
                <div class="branch-gd went-branc"><a href="room.html">
                    <img th:src="@{/images/b2.jpg}" alt="" class="img-responsive">
                    <div class="overlay">
                        <span class="expand">+</span>
                        <span class="close-overlay hidden">x</span>
                    </div>
                </a>
                </div>
            </div>
            <div class="col-md-3 branch-gd-main">
                <div class="branch-gd"><a href="room.html">
                    <img th:src="@{/images/b3.jpg}" alt="" class="img-responsive">
                    <div class="overlay">
                        <span class="expand">+</span>
                        <span class="close-overlay hidden">x</span>
                    </div>
                </a>
                </div>
                <div class="branch-gd"><a href="room.html">
                    <img th:src="@{/images/b4.jpg}" alt="" class="img-responsive">
                    <div class="overlay">
                        <span class="expand">+</span>
                        <span class="close-overlay hidden">x</span>
                    </div>
                </a>
                </div>
            </div>
            <div class="col-md-3 branch-gd-main">
                <div class="branch-gd went-branc2"><a href="room.html">
                    <img th:src="@{/images/b5.jpg}" alt="" class="img-responsive">
                    <div class="overlay">
                        <span class="expand lardge">+</span>
                        <span class="close-overlay hidden">x</span>
                    </div>
                </a>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<!--首页 grid end here-->

<!--footer start here-->
<div th:replace="web_page/public_page.html::#footer"></div>
<!--footer end here-->
<!--copy-right start here-->
<div th:replace="web_page/public_page.html::#copy-right"></div>
<!--copy-right end here-->

<!--<script>-->
    <!--layui.use(['layer'],function () {-->
        <!--var layer = layui.layer;-->
    <!--});-->
<!--</script>-->
</body>
</html>